<template>
	<div class="login">
		<div class="container-login">
			<div class="container-login-box">
				<form class="login-form validate-form" @submit.prevent="handleSubmit">
					<span class="login-form-title">登录</span>

					<div class="login-input validate-input">
						<span for="userName" class="label-input">用户名</span>
						<input v-model="user.userName" id="firstName"  :class="{ 'is-invalid': submitted && $v.user.userName.$error }" class="input" type="text" name="userName" placeholder="请输入用户名" autocomplete="off">
						<span class="focus-input fa fa-user"></span>
					</div>
					<div v-if="submitted && !$v.user.userName.required" class="invalid-feedback">User Name is required</div>
					<div v-if="submitted && !$v.user.userName.minLength" class="invalid-feedback">User Name must at least Four characters</div>

					<div class="login-input validate-input">
						<span for="passWord" class="label-input">密码</span>
						<input v-model="user.passWord" id="passWord" :class="{ 'is-invalid': submitted && $v.user.passWord.$error }" class="input" type="password" name="passWord" placeholder="请输入密码">
						<span class="focus-input fa fa-lock"></span>
					</div>
					<span v-if="submitted && !$v.user.passWord.required">Password is required</span>
                    <span v-if="submitted && !$v.user.passWord.minLength">Password must be at least 8 characters</span>





					<div class="text-right">
						<a href="javascript:">忘记密码？</a>
					</div>

					<div class="container-login-form-btn">
						<div class="wrap-login-form-btn">
							<div class="login-form-bgbtn"></div>
							<button class="login-form-btn">登 录</button>
						</div>
					</div>

					<div class="text-center">
						<span>第三方登录</span>
					</div>

					<div class="flex-c-m">
						<a href="#" class="login-social-item bg1">
							<i class="fa fa-wechat"></i>
						</a>

						<a href="#" class="login-social-item bg2">
							<i class="fa fa-qq"></i>
						</a>

						<a href="#" class="login-social-item bg3">
							<i class="fa fa-weibo"></i>
						</a>
					</div>

					<div class="flex-col-c">
						<a class="txt2"><router-link to="/register">立即注册</router-link></a>
					</div>
				</form>


			</div>
</div>
		
	</div>
</template>

<script type="text/javascript">
import { required, minLength, between } from 'vuelidate/lib/validators'

export default {
  data () {
    return {
      user:{
      	userName:"",
      	passWord:""
      },
      submitted:false
    }
  },
  validations: {
    user:{
    	userName:{required,minLength: minLength(4)},
    	passWord:{required,minLength: minLength(8)}
    }
  },

   methods: {
            handleSubmit(e) {
                this.submitted = true;

                // stop here if form is invalid
                this.$v.$touch();
                if (this.$v.$invalid) {
                    return;
                }

                alert("SUCCESS!! :-)\n\n" + JSON.stringify(this.user));
            }
        }
}
</script>

<style scoped>
.body{
	text-align: center;
}
.container-login{
	background-image: url('../assets/img/bg-01.jpg');
	height: 900px;
	width: 100%;
	text-align: center;
	position: relative;
}
.container-login-box {
  width: 500px;
  background: #fff;
  border-radius: 10px;
  height: 700px;
  overflow: hidden;
  position:absolute;
  left:0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;

  padding-left: 55px;
  padding-right: 55px;
  padding-top: 65px;
  padding-bottom: 54px;
}
.login-from{
	width: 100%;
}

.login-form-title{
  display: block;
  font-family: 'Microsoft Yahei';
  font-size: 39px;
  color: #333333;
  line-height: 1.2;
  text-align: center;

  padding-bottom: 40px;
}

.login-form {
  width: 100%;
}

.login-input {
  width: 100%;
  position: relative;
  border-bottom: 2px solid #d9d9d9;
  margin-left: 0px;
  margin-bottom: 23px;
}
.label-input {
  font-family: 'Microsoft Yahei';
  font-size: 14px;
  color: #333333;
  line-height: 1.5;
  float: left;
  text-align: center;
  padding-bottom: 10px;
}
.input {
  font-family: 'Microsoft Yahei';
  font-size: 16px;
  color: #333333;
  line-height: 1.2;
  border:none;  /*去掉input边框*/
  outline:none; /*去掉input focus时的边框*/
  display: block;
  width: 446px;
  height: 55px;
  background: transparent;
  padding: 0 7px 0 43px;
}
.focus-input {
  position: absolute;
  display: block;
  width: 100%;
  height: 50%;
  top: 7px;
  left: 20px;
  pointer-events: none;

}

.focus-input::after {
  
  font-family: Material-Design-Iconic-Font;
  color: #adadad;
  font-size: 22px;

  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: calc(100% - 20px);
  bottom: 0;
  left: 0;
  padding-left: 13px;
  padding-top: 3px;
}

.focus-input::before {
  /*content: ""; 需要去掉否则图标不显示*/
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #7f7f7f;
 
  transition: all 0.4s;
}
.text-right{
	text-align: right;
	padding-top: 8px;
	padding-bottom: 31px;
}
.text-right a{
	text-decoration: none;
}
.container-login-form-btn {
  
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.wrap-login-form-btn {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: 25px;
  overflow: hidden;
  margin: 0 auto;
  clear: both;
  box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
  -webkit-box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
  
}

.login-form-bgbtn {
  position: absolute;
  z-index: -1;
  width: 300%;
  height: 100%;
  top: 0;
  left: -100%;

}

.login-form-btn {
  font-family: 'Microsoft Yahei';
  font-size: 16px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;
  background: #a64bf4;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  height: 50px;
  background: -webkit-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
  
}

.login-form-btn:hover {
  left: 0;
  transition: all 0.4s;

}


.text-center{
	padding-top: 54px;
	padding-bottom: 20px;
	font-family: 'Microsoft Yahei';
  font-size: 14px;
  line-height: 1.5;
  color: #666666;
}
.flex-c-m {
	
	display: flex;
	justify-content: center;

	align-items: center;
}
.login-social-item {
  font-size: 25px;
  color: #fff;


  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 5px;
  text-decoration: none;
}


.bg1 {background-color: #3b5998}
.bg2 {background-color: #1da1f2}
.bg3 {background-color: #ea4335}

.login-social-item:hover{
	background: #000;
}
.flex-col-c {

	display: flex;
	
	flex-direction: column;
	
	align-items: center;
	padding-top: 25px;


}
.txt2 {
  font-family: 'Microsoft Yahei';
  font-size: 14px;
  line-height: 1.5;
  color: #333333;
  text-transform: uppercase;

}
.txt2 a{
	text-decoration: none;
}
</style>